import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowBack
import androidx.compose.material.icons.filled.Done
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.example.senior_homework.viewmodel.MyViewModel

/*
*author:guyueyuan
*createTime:2024/11/18
*/

@Composable
fun ShowDetails(id:Int,viewModel: MyViewModel) {


    val data by viewModel.showDetailData
    var content by remember { mutableStateOf("") }
//    val coroutine = rememberCoroutineScope()
//    这个 CoroutineScope 的生命周期与 Composable 的生命周期绑定，因此你不需要手动管理它的销毁。

    LaunchedEffect(Unit) {
        viewModel.getDetailById(id)
    }

    LaunchedEffect(data) {
        content= data?.content ?: ""
    }

    Column(
        modifier = Modifier
            .fillMaxSize()
    ) {
        // 固定高度的标题
        Row(
            modifier = Modifier
                .height(96.dp)  // 设置固定高度
                .fillMaxWidth()
                .background(Color(0xFF8CC7D6))
                .padding(top = 16.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                tint = Color.White,
                imageVector = Icons.Default.ArrowBack,
                contentDescription = null,
                modifier = Modifier
                    .size(24.dp)
                    .weight(0.1f)
                    .padding(start = 16.dp)
                    .clickable {
                        viewModel.navBack()
                    }
            )
            if (data != null) {
//                双感叹号是告诉编译器，确认不是null
                Text(
                    text = data!!.title,
                    fontSize = 24.sp,
                    color = Color.White,
                    textAlign = TextAlign.Center,
                    modifier = Modifier.weight(0.8f)
                )

                Icon(
                    tint = Color.White,
                    imageVector = Icons.Default.Done,
                    contentDescription = null,
                    modifier = Modifier
                        .size(24.dp)
                        .weight(0.1f)
                        .padding(end = 16.dp)
                        .clickable {
                            println("new content is $content")
                            data!!.content=content
                            viewModel.updateDateFromShowDetail()
                            viewModel.navBack()
//                            coroutine.launch(Dispatchers.IO) {
//                                dao.updateSenior(data!!)
//                                navController.popBackStack()
//                            }
//                            这里的问题是，导航是ui变化，必须在主线程执行（这些细节经验只有经历了才更熟悉）
                        }
                )
            }
        }

        // 自适应屏幕剩余长度的内容
        Box(
            modifier = Modifier
                .weight(1f)  // 占据剩余的空间
                .fillMaxWidth()
                .background(Color(0xFFA3E8FA))
                .padding(16.dp),
            contentAlignment = Alignment.TopStart
        ) {
            if (data != null) {

                BasicTextField(
                    value = content,
                    onValueChange = { newText ->
                        content=newText
                    },
                    modifier = Modifier.fillMaxWidth().fillMaxHeight(),
                    textStyle = TextStyle(fontSize = 18.sp, color = Color.Black),
                )

            }
        }

    }
}

@Preview
@Composable
fun ShowDetailsPre() {
}


/*
*
* 在 Jetpack Compose 中，使用 NavController 的 popBackStack 方法而不是 navigate 方法来返回上一个页面，主要有以下几个原因：

1. 栈管理
popBackStack 方法会从导航栈中移除当前的目的地（destination），从而返回到前一个目的地。这符合用户对“返回”按钮的预期行为，即返回到上一个页面。

2. 避免重复导航
如果你使用 navigate 方法来返回上一个页面，可能会导致导航栈中出现重复的目的地。例如，如果你从 A 导航到 B，再从 B 导航回 A，使用 navigate 方法会导致 A 在栈中出现两次。这不仅会增加内存开销，还可能导致用户多次点击返回按钮才能完全退出应用。

3. 保持导航历史
popBackStack 会正确地管理导航历史记录，确保用户可以通过连续点击返回按钮依次返回到之前的页面，直到退出应用。而 navigate 方法则会创建新的导航条目，可能会破坏这种历史记录。

4. 简化代码
使用 popBackStack 方法更简洁，不需要显式地指定要返回的目标页面。这对于复杂的导航结构尤其有用，因为你不必关心当前页面的具体位置和目标页面的标识符。
*
* */